<template>
  <div class="home">
    <div class="tobox">
      <span class="tpx">文章标题：</span>
      <div class="titlbox">
        <el-input placeholder="请输入文章标题..." v-model="title" clearable>
        </el-input>
      </div>
      <el-upload :before-upload="uploadimg" class="upload-demo" action="/">
        <el-button type="success">导入</el-button>
      </el-upload>
      <el-button class="fabu" @click="dialogFormVisible = true" type="primary"
        >发布文章</el-button
      >
    </div>
    <mavon-editor
      :toolbars="markdownOption"
      :codeStyle="codeStyle"
      ref="md"
      :ishljs="true"
      :scrollStyle="true"
      v-model="value"
      @save="saveMavon"
      style="min-height: 600px"
      @imgAdd="$imgAdd"
      @imgDel="$imgDel"
    />
    <el-dialog title="文章发布" :visible.sync="dialogFormVisible">
      <el-row style="text-align: left; margin-bottom: 20px">
        <el-col :span="24">
          <span style="font-size: 16px">文章标题：</span>
          <el-input style="width: 50%" v-model="title"></el-input>
        </el-col>
      </el-row>
      <el-row style="text-align: left; margin-bottom: 20px">
        <el-col :span="24">
          <span style="font-size: 16px">展示封面：</span>
          <el-radio-group @change="covechagr" v-model="radio1">
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="2">无封面</el-radio>
          </el-radio-group>
          <el-upload
            v-if="loadImgshow"
            style="margin-left: 78px; margin-top: 10px"
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            ref="pictureUpload"
            :limit="1"
            :on-change="previewDiagram5"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-col>
      </el-row>
      <el-row style="text-align: left; margin-bottom: 20px">
        <el-col :span="24">
          <span style="font-size: 16px">文章标签：</span>
          <el-tag
            :key="tag"
            v-for="tag in dynamicTags"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
            style="margin-left: 10px"
          >
            {{ tag }}
          </el-tag>

          <el-button class="button-new-tag" size="small" @click="showInput"
            >+ 添加文章分类</el-button
          >
          <!-- <div class="tagcont">
            <i class="el-icon-circle-close coloico"></i>
            <div class="tagbox">
              <el-tag
                v-for="item in items"
                :key="item.label"
                :type="item.type"
                class="tagss"
                effect="plain"
              >
                {{ item.label }}
              </el-tag>
            </div>
          </div> -->
        </el-col>
      </el-row>
      <transition name="el-fade-in-linear">
        <el-row v-if="tabdio" style="text-align: left; margin-bottom: 20px">
          <el-col :span="24">
            <div class="tagcont">
              <i
                @click="tabdio = false"
                class="el-icon-circle-close coloico"
              ></i>
              <div class="tagbox">
                <el-tag
                  v-for="item in items"
                  :key="item.label"
                  :type="item.type"
                  @click="add(item)"
                  class="tagss"
                  effect="plain"
                >
                  {{ item.label }}
                </el-tag>
              </div>
            </div>
          </el-col>
        </el-row>
      </transition>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="Posted">发 布</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import marked from "marked";
import { upload } from "../utils/Fileupload";
export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  data() {
    return {
      formLabelWidth: "120px",
      radio1: "无封面",
      dialogFormVisible: false,
      value: "",
      markdownOption: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        strikethrough: true, // 中划线
        mark: true, // 标记
        superscript: true, // 上角标
        subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        navigation: true, // 导航目录
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        subfield: true, // 单双栏模式
        preview: true, // 预览
      },
      codeStyle: "monokai-sublime",
      title: "",
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      items: [
        { type: "", label: "Vue" },
        { type: "success", label: "HTML" },
        { type: "info", label: "JavaScript" },
        { type: "danger", label: "Node.js" },
        { type: "warning", label: "CSS" },
        { type: "info", label: "java" },
        { type: "success", label: "json" },
        { type: "warning", label: "Vant UI" },

        { type: "warning", label: "less" },
        { type: "success", label: "html5" },
        { type: "danger", label: "npm" },
        { type: "warning", label: "Mysql" },
        { type: "info", label: "SqlServer" },
        { type: "warning", label: "ES6" },
        { type: "warning", label: "sass" },
        { type: "success", label: "yarn" },
        { type: "info", label: "ES5" },
        { type: "warning", label: "websocket" },
        { type: "info", label: ".net" },
        { type: "success", label: "webpack" },
        { type: "info", label: "postman" },
        { type: "info", label: "react.js" },
        { type: "danger", label: "移动端" },
        { type: "warning", label: "Element ui" },
        { type: "warning", label: "前端" },
        { type: "danger", label: "express" },
        { type: "success", label: "XML" },
      ],
      tabdio: false,
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      loadImgshow: false,
      coveFile: null,
      coveName: "",
      img_file: {},
    };
  },
  methods: {
    Posted() {
      this.SaveContent();
    },
    saveMavon(value, render) {
      if (this.title == "") {
        this.$message({
          message: "请输入文章标题",
          type: "warning",
        });
      } else {
      }
    },
    async SaveContent() {
      if (this.value == "") {
        this.$message({
          message: "请填写文章内容！",
          type: "warning",
        });
      } else {
        if (this.coveFile != null) {
          let url = "blog";
          upload.uploadChange(this.coveFile, url);
        }

        let data = {
          title: this.title,
          Content: this.value,
          Author: "万能青年",
          tiem: new Date(),
          thumbupNum: 0,
          Stepon: 0,
          Cover: this.coveName,
          isCover: this.radio1,
          Tags: this.dynamicTags.toString(),
          isUP: "1",
        };
        const { data: res } = await this.$http.post("SaveArticles", data);
        console.log(res);
        if (res.status == 200) {
          this.$message({
            message: "文章发布成功！",
            type: "success",
          });
          this.dialogFormVisible = false;
          this.title = "";
          this.value = "";
          this.coveFile = null;
          this.coveName = "";
        }
      }
    },
    uploadimg(file) {
      let a = this.getExtension(file.name);
      if (a != "md") {
        this.$message({
          message: "请上传md格式文件！",
          type: "warning",
        });
      } else {
        this.loadMD(file);
      }
    },
    async loadMD(file) {
      var formData = new FormData(); //创建formdata对象
      formData.append("md", file);
      const { data: res } = await this.$http.post("ImportMdFile", formData);
      this.value = res.data;
      this.title = this.delExtension(res.name);
    },
    delExtension(str) {
      var reg = /.md$/;
      return str.replace(reg, "");
    },
    getExtension(name) {
      return name.substring(name.lastIndexOf(".") + 1);
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.tabdio = !this.tabdio;
    },
    add(item) {
      for (var i = 0; i < this.dynamicTags.length; i++) {
        if (this.dynamicTags[i] == item.label) {
          this.$message("该标签已添加！");
          return false;
        }
      }
      if (this.dynamicTags.length > 2) {
        this.$message("最多添加三个标签！");
      } else {
        this.dynamicTags.push(item.label);
      }
    },
    handleInputConfirm() {
      // let inputValue = this.inputValue;
      // if (inputValue) {
      //   this.dynamicTags.push(inputValue);
      // }
      // this.inputVisible = false;
      // this.inputValue = "";
    },
    covechagr() {
      if (this.radio1 == 1) {
        this.loadImgshow = true;
      } else {
        this.loadImgshow = false;
      }
    },
    handleRemove(file) {
      let uploadFiles = this.$refs.pictureUpload.uploadFiles;
      for (var i = 0; i < uploadFiles.length; i++) {
        if (uploadFiles[i]["url"] == file.url) {
          uploadFiles.splice(i, 1);
        }
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    previewDiagram5(file) {
      this.coveFile = file.raw;
      this.coveName = file.name;
      console.log(file);
    },
    // 向md中上传图片
    $imgAdd(pos, $file) {
      let url = "markdonw";
      upload.uploadChange($file, url);
      this.img_file[pos] = $file;
      setTimeout(() => {
        this.$refs.md.$img2Url(pos, this.markUrl + $file.name);
      }, 1000);
    },
    $imgDel(pos) {
      delete this.img_file[pos];
    },
  },
};
</script>
<style>
.tobox {
  margin: 15px 0;
  text-align: right;
  display: flex;
  justify-content: space-between;
}
.titlbox {
  margin-right: 20px;
  width: 100%;
}
.tpx {
  width: 115px;
  line-height: 41px;
  font-size: 18px;
}
.fabu {
  margin-left: 10px !important;
  height: 38px;
}
.el-tag + .el-tag {
  /* margin-left: 10px; */
}
.button-new-tag {
  margin-left: 10px !important;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 15px !important;
  vertical-align: bottom;
}
.taginput {
  width: 83px !important;
  /* line-height: 20px; */
  /* margin-top: 10px; */
  position: relative !important;
  top: 7px;
  left: -17px;
}
.tagcont {
  position: relative;
  left: 77px;
  /* right: 54px; */
  top: -12px;
  width: 321px;
  height: auto;
  z-index: 2006;
  background: #fff;
  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%);
  border: 1px solid #e3e3e3;
  padding: 10px 15px;
  /* overflow: hidden; */
  /* overflow: scroll; */
}
.tagss {
  margin: 6px;
}
.tagbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 360px;
  height: 150px;
  overflow-y: scroll;
}
.coloico {
  font-size: 20px;
  position: absolute;
  right: 5px;
  top: 4px;
  cursor: pointer;
}
</style>
